<template>
	<div>
		<el-card shadow="hover">
			<div class="mb15">
				<el-input v-model="state.tableData.param.telephone" size="default" placeholder="请输入手机号" clearable style="max-width: 180px"> </el-input>
				<el-button size="default" type="primary" class="ml10" @click="getTableData">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="success" class="ml10" :disabled="!state.tableData.param.checkedIds.length" v-auth="'computer:examine'" @click="onExamine">
					<el-icon>
						<ele-Edit />
					</el-icon>
					审核
				</el-button>
        <el-button size="default" type="warning" class="ml10" :disabled="!state.tableData.param.checkedIds.length" v-auth="'computer:strategy'" @click="getTableData">
					<el-icon>
						<ele-Edit />
					</el-icon>
					修改策略
				</el-button>
				<el-button size="default" type="danger" class="ml10" :disabled="!state.tableData.param.checkedIds.length" v-auth="'computer:extension'" @click="onExtension">
					<el-icon>
						<ele-Timer />
					</el-icon>
					延期
				</el-button>
			</div>
      <el-alert :title="'已选择 '+state.tableData.param.checkedIds.length+' 条'" type="success" :closable="false" v-auths="['computer:examine','computer:strategy','computer:extension']" class="mb10"/>
			<el-table
				border
        ref="tableRef"
				:data="state.tableData.data"
				style="width: 100%"
				row-key="id"
				v-loading="state.tableData.loading"
        @selection-change="handleSelectionChange"
			>
        <el-table-column type="selection" :reserve-selection="true" align="center" fixed="left" width="40" v-auths="['computer:examine','computer:strategy','computer:extension']" />
				<el-table-column type="index" label="序号" align="center" width="70" />
				<el-table-column prop="computname" label="主机名" align="center" show-overflow-tooltip min-width="120"> </el-table-column>
				<el-table-column prop="computmac" label="mac地址" align="center" show-overflow-tooltip min-width="150"></el-table-column>
				<el-table-column prop="userid" label="电话" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="starttime" label="有效期-起始" align="center" show-overflow-tooltip width="170">
					<template #default="scope">
						{{ scope.row.starttime && formatDate(new Date(scope.row.starttime), 'YYYY-mm-dd HH:MM:SS') }}
					</template>
				</el-table-column>
        <el-table-column prop="endtime" label="有效期-截止" align="center" show-overflow-tooltip width="170">
					<template #default="scope">
						{{ scope.row.endtime && formatDate(new Date(scope.row.endtime), 'YYYY-mm-dd HH:MM:SS') }}
					</template>
				</el-table-column>
        <el-table-column prop="code" label="code码" align="center" show-overflow-tooltip min-width="120"></el-table-column>
        <el-table-column prop="configjson" label="运行策略" align="center" show-overflow-tooltip min-width="120"></el-table-column>
				<el-table-column prop="createAt" label="创建时间" align="center" show-overflow-tooltip width="170">
					<template #default="scope">
						{{ scope.row.createAt && formatDate(new Date(scope.row.createAt), 'YYYY-mm-dd HH:MM:SS') }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center" show-overflow-tooltip width="100">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status === 1">通过</el-tag>
						<el-tag type="warning" v-else-if="scope.row.status === 2">待审核</el-tag>
						<el-tag type="info" v-else>{{ scope.row.status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" show-overflow-tooltip width="210" fixed="right" v-auths="['computer:examine','computer:strategy','computer:extension']">
					<template #default="scope">
            <el-button size="small" type="success" v-if="scope.row.status === 2" v-auth="'computer:examine'" @click="onExamine(scope.row)">审核</el-button>
            <el-button size="small" type="warning" v-auth="'computer:strategy'" @click="getTableData">策略</el-button>
            <el-button size="small" type="danger" v-auth="'computer:extension'" @click="onExtension(scope.row)">延期</el-button>
						<!-- <el-button size="small" type="danger" v-auth="'company:del'" @click="onTabelRowDel(scope.row)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页组件 -->
			<Pagination 
				class="mt15"
				:total="state.tableData.total"
				:page="state.tableData.param.pageNum"
				:limit="state.tableData.param.pageSize"
				@pagination="pageChange"
			/>
		</el-card>
		<!-- 延期设置 -->
		<Extension ref="extensionRef"/>
	</div>
</template>

<script setup lang="ts" name="systemComputer">
import Extension from './modal/extension.vue';
import { formatDate } from '/@/utils/formatTime';
// 后台接口
import { systemApi } from '/@/api/system/index';
const extensionRef = ref();
const tableRef = ref()
const state = reactive<SysComputerState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
      telephone: '',
			pageNum: 1,
			pageSize: 10,
      checkedIds: [],
		},
	},
});
// 初始化表格数据
const getTableData = async () => {
	state.tableData.loading = true;
	// 清除勾选
	tableRef.value.clearSelection()
	let res: any = await systemApi().getComputerList(state.tableData.param);
	state.tableData.data = res.datas.list;
	state.tableData.total = res.datas.count;
	state.tableData.loading = false;
};
// 审核
const onExamine = async (row: RowComputerType) => {
	ElMessageBox.confirm(`确定审核通过吗?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		let ids = <any>[]
		if(row){
			ids = [row.id]
		}else{
			ids = state.tableData.param.checkedIds
		}
		let res:any = await systemApi().examineComputer({ids});
		if(res.success){
			ElMessage.success("操作成功");
			// 清除勾选
			tableRef.value.clearSelection()
			getTableData()
		}else{
			ElMessage.error("操作失败");
		}
	})
	.catch(() => {});
};

  
// 延期
const onExtension = async (row: RowComputerType) => {
	let selectIds = []
	if(row.id){
		selectIds = [row]
	}else{
		selectIds = state.tableData.param.checkedIds
	}
	extensionRef.value.openDialog(selectIds)
}

// 表格勾选
const handleSelectionChange = (selection: RowComputerType[]) => {
  state.tableData.param.checkedIds = selection.map((item) => item.id)
}

// 打开新增菜单弹窗
// const onOpenAddDept = () => {
// 	addCompanyRef.value.openDialog();
// };
// 打开编辑菜单弹窗
// const onOpenEditDept = (row: RowCompanyType) => {
// 	addCompanyRef.value.openDialog(row);
// };
// 删除当前行
// const onTabelRowDel = (row: RowCompanyType) => {
// 	ElMessageBox.confirm(`此操作将永久删除该部门, 是否继续?`, '提示', {
// 		confirmButtonText: '删除',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	})
// 		.then(async () => {
// 			let res: any = await systemApi().delCompany({ id: row.id });
// 			if (res.success) {
// 				getTableData();
// 				ElMessage.success('操作成功');
// 			} else {
// 				ElMessage.error('操作失败');
// 			}
// 		})
// 		.catch(() => {});
// };
// 分页组件改变
const pageChange = (pageObj: {pageNum:number,pageSize:number}) => {
	state.tableData.param.pageNum = pageObj.pageNum;
	state.tableData.param.pageSize = pageObj.pageSize;
	getTableData();
}
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
